<template>
  <div class="mq-edit-wrap">
    <a-form-model :model="form"
                  :rules="rules"
                  ref="form"
                  :label-col="labelCol"
                  :wrapper-col="wrapperCol"
                  layout="horizontal">
      <!-- 接口名称 -->
      <a-form-model-item label="接口名称"
                         prop="name">
        <a-input v-model="form.name"
                 placeholder="请输入"></a-input>
      </a-form-model-item>
      <a-form-model-item label="连接类型"
                         prop="type">
        <a-select v-model="form.type"
                  placeholder="请选择">
          <a-select-option value="1">生产</a-select-option>
          <a-select-option value="2">消费</a-select-option>
        </a-select>
      </a-form-model-item>
      <template v-if="showType === '12'">
        <a-form-model-item label="exchange"
                           prop="exchange">
          <a-input v-model="form.exchange"
                   placeholder="请输入"></a-input>
        </a-form-model-item>
        <a-form-model-item label="routingKey"
                           prop="routingKey">
          <a-input v-model="form.routingKey"
                   placeholder="请输入"></a-input>
        </a-form-model-item>
      </template>
      <template v-if="showType === '13' || showType === '23' || showType === '14' || showType === '24'">
        <a-form-model-item label="topicName"
                           prop="topicName">
          <a-input v-model="form.topicName"
                   placeholder="请输入"></a-input>
        </a-form-model-item>
        <a-form-model-item label="groupId"
                           prop="groupId">
          <a-input v-model="form.groupId"
                   placeholder="请输入"></a-input>
        </a-form-model-item>
      </template>
      <template v-if="showType === '22'">
        <a-form-model-item label="queueName"
                           prop="queueName">
          <a-input v-model="form.queueName"
                   placeholder="请输入"></a-input>
        </a-form-model-item>
      </template>
      <a-form-model-item label="是否注册"
                         prop="isRegister">
        <a-switch v-model="form.isRegister" />
      </a-form-model-item>
      <a-form-model-item label="tag"
                         prop="tag">
        <a-input v-model="form.tag"
                 placeholder="请输入tag，多个tag用'||'隔开"></a-input>
      </a-form-model-item>
      <a-form-model-item label="描述"
                         prop="detail">
        <a-textarea v-model="form.detail"
                    placeholder="请输入"></a-textarea>
      </a-form-model-item>
      <div style="text-align:center;margin-top:10px">
        <a-button type="primary"
                  @click="onSave">保存</a-button>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import { fetchSaveConnectorInstance, fetchInstanceInfo } from '../../../api/connector-manage'
export default {
  name: 'MqEdit',
  props: {
    parentNode: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      form: {
        name: '',
        type: '',
        exchange: '',
        routingKey: '',
        queueName: '',
        topicName: '',
        groupId: '',
        tag: '',
        detail: '',
        isRegister: false
      },
      rules: {
        type: [{
          required: true, message: '请选择类型', trigger: 'change'
        }],
        name: [{
          required: true, message: '请输入名称', trigger: 'blur'
        }],
        exchange: [{
          required: true, message: '请输入exchange', trigger: 'blur'
        }],
        routingKey: [{
          required: true, message: '请输入routingKey', trigger: 'blur'
        }],
        queueName: [{
          required: true, message: '请输入queueName', trigger: 'blur'
        }],
        topicName: [{
          required: true, message: '请输入topicName', trigger: 'blur'
        }],
        groupId: [{
          required: true, message: '请输入groupId', trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    /**
     * 连接器类型：1--生产、2--消费
     * 接口类型：2--RABBITMQ 3--KAFKA 4--ROCKETMQ
     * showType类型 = 连接器类型 + 接口类型
     * {
     *   12: RABBITMQ生产
     *   13: KAFKA生产
     *   14: ROCKETMQ生产
     *   22: RABBITMQ消费
     *   23: KAFKA消费
     *   24: ROCKETMQ消费
     * }
     */
    showType: function () {
      return `${this.form.type}${this.parentNode.type}`
    }
  },
  watch: {
    parentNode: {
      handler: function (newNode) {
        if (newNode && newNode.showRightType === 'MQ') {
          if (!newNode.isAdd) {
            this.getMqInfo(newNode)
          } else {
            this.$refs['form'].resetFields()
            for (const key of ['exchange', 'routingKey', 'queueName', 'topicName', 'groupId']) {
              this.form[key] = ''
            }
          }
        }
      },
      deep: true
    }
  },
  methods: {
    async getMqInfo (node) {
      const res = await fetchInstanceInfo(node.id, node.type)
      const connectorMQ = res.connectorMQVo
      connectorMQ.isRegister = Boolean(Number(connectorMQ.isRegister))
      this.form = { ...connectorMQ }
    },
    onSave () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const paramForm = { ...this.form }
          paramForm.isRegister = paramForm.isRegister ? '1' : '0'
          const params = {
            connectorId: this.parentNode.id,
            connectorMQVo: paramForm
          }
          fetchSaveConnectorInstance(params).then(() => {
            this.$emit('sucess')
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>